import React from 'react';
import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Pages from './importPage';
import SvgIcons from '@/assets/svg';

const Stack = createStackNavigator();
const Tabs = createBottomTabNavigator();
const Router = () => {
  return (
    <>
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={({route}) => {
            const info = route.name === 'Login' ? TransitionPresets.ModalSlideFromBottomIOS : TransitionPresets.SlideFromRightIOS;
            return {
              headerStyle: {elevation: 0, borderBottomWidth: 0}, // 一个应用于 header 的最外层 View 的 样式对象
              headerTintColor: 'black',
              headerTitleStyle: {fontWeight: 'bold'},
              mode: 'modal',
              headerBackTitleVisible: true,
              headerTitleAlign: 'center',
              cardStyle: {flex: 1, backgroundColor: '#f5f5f9'},
              ...info,
            };
          }}>
          <Stack.Screen
            name="Login"
            component={Pages.Login}
            options={() => {
              return {headerShown: false};
            }}
          />
          <Stack.Screen
            name="ResetPassword"
            component={Pages.ResetPassword}
            options={() => {
              return {headerShown: false};
            }}
          />
          <Stack.Screen
            name="Register"
            component={Pages.Register}
            options={() => {
              return {headerShown: false};
            }}
          />
          <Stack.Screen
            name="Search"
            component={Pages.Search}
            options={() => {
              return {headerShown: false};
            }}
          />
          <Stack.Screen
            name="Ling"
            component={Pages.Ling}
            options={() => {
              return {headerShown: false};
            }}
          />
          <Stack.Screen
            name="Chat"
            component={Pages.Chat}
            options={() => {
              return {headerShown: false};
            }}
          />
          <Stack.Screen
            name="ChatSettings"
            component={Pages.ChatSettings}
            options={() => {
              return {headerShown: false};
            }}
          />
          <Stack.Screen
            name="ChatSetName"
            component={Pages.ChatSetName}
            options={() => {
              return {headerShown: false};
            }}
          />
          <Stack.Screen
            name="ChatSetLabel"
            component={Pages.ChatSetLabel}
            options={() => {
              return {headerShown: false};
            }}
          />
          <Stack.Screen
            name="ChatAddUser"
            component={Pages.ChatAddUser}
            options={() => {
              return {headerShown: false};
            }}
          />
          <Stack.Screen
            name="ChatRemoveUser"
            component={Pages.ChatRemoveUser}
            options={() => {
              return {headerShown: false};
            }}
          />
          <Stack.Screen
            options={() => {
              return {headerShown: false};
            }}
            name="Tbabar"
            component={TabsScreen}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
};
const TbabarList = [
  {title: '运营', name: 'Operation', component: Pages.Operation, icon: SvgIcons.Operation, iconFill: SvgIcons.OperationFill},
  {title: '工作', name: 'Work', component: Pages.Work, icon: SvgIcons.Work, iconFill: SvgIcons.WorkFill},
  {title: '生活', name: 'Live', component: Pages.Live, icon: SvgIcons.Live, iconFill: SvgIcons.LiveFill},
  {title: '平台', name: 'Platform', component: Pages.Platform, icon: SvgIcons.Platform, iconFill: SvgIcons.PlatformFill},
  {title: '发展', name: 'Education', component: Pages.Education, icon: SvgIcons.Education, iconFill: SvgIcons.EducationFill},
  {title: '休闲', name: 'Leisure', component: Pages.Leisure, icon: SvgIcons.Leisure, iconFill: SvgIcons.LeisureFill},
  {title: '管理', name: 'Manage', component: Pages.Manage, icon: SvgIcons.Manage, iconFill: SvgIcons.ManageFill},
];
const TabsScreen = () => {
  return (
    <Tabs.Navigator
      screenOptions={({route}) => {
        return {
          tabBarIcon: ({focused, color, size}) => {
            const item = TbabarList.find(t => t.name === route.name)!;
            let Icon = (focused ? <item.iconFill width={size} height={size} color={color} /> : <item.icon width={size} height={size} color={color} />) as any;
            return Icon;
          },
          headerShown: false,
        };
      }}>
      {TbabarList.map((item, index) => {
        return <Tabs.Screen key={index} options={{title: item.title}} name={item.name} component={item.component} />;
      })}
    </Tabs.Navigator>
  );
};

export default Router;
